<!--
 * @Author: 码上talk|RC
 * @Date: 2021-09-06 21:00:36
 * @LastEditTime: 2021-09-07 10:42:43
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/default/pages/shop/record/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="record">
    <van-sticky>
      <view class="r-header">
        <view class="type" @tap="popupShow = true">
          <input type="text" disabled :value="curValue" />
          <icon class="iconfont arrow">&#xe62c;</icon>
        </view>
        <view class="time">
          <icon class="iconfont clock">&#xe64d;</icon>
          <view class="text">今天</view>
        </view>
      </view>
    </van-sticky>
    <view class="r-block">
      <view class="r-item">
        <view class="sn">订单编号：1232131243</view>
        <view class="content" @tap="toOrderInfo()">
          <view class="row">
            <text>订单类型</text>
            <text>会员订单</text>
          </view>
          <view class="row">
            <text>会员姓名</text>
            <text>李嘉欣</text>
          </view>
          <view class="row">
            <text>会员电话</text>
            <text>2222元</text>
          </view>
          <view class="row">
            <text>订单金额</text>
            <text>200元</text>
          </view>
        </view>
        <view class="button">
          <view class="b-item" @tap="toOrderInfo()">订单详情</view>
        </view>
      </view>
      <a-logo type="text"></a-logo>

      <van-popup
        :show="popupShow"
        round
        position="bottom"
        z-index="9999"
        close-on-click-overlay
        @close="popupShow=false"
      >
        <van-picker
          ref="Picker"
          show-toolbar
          :visible-item-count="3"
          default-index="1"
          :columns="recordType === 1? orderType : balanceType"
          @confirm="handleConfirmChange"
          @cancel="popupShow=false"
        />
      </van-popup>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      recordType: 1,
      curValue: '全部订单',
      orderType: ['全部订单', '零售订单', '会员订单'],
      balanceType: ['全部类型', '账户余额', '至尊钱包'],
      popupShow: false,
    }
  },
  onLoad (options) {
    this.setNavigationBarTitle()
  },
  methods: {
    setNavigationBarTitle (e) {
      if (this.recordType === 1) {
        uni.setNavigationBarTitle({
          title: '订单记录'
        });
      }
      if (this.recordType === 2) {
        uni.setNavigationBarTitle({
          title: '充值记录'
        });
      }
    },
    toOrderInfo () {
    },
    handleConfirmChange (e) {
      const { index, value } = e.detail
      this.curValue = value
      this.popupShow = false
    }
  }
}
</script>

<style lang="less">
.record {
  min-height: 100vh;
  background-color: #f7f7f7;

  /deep/.van-sticky-wrap--fixed {
    background-color: #f7f7f7;
    height: 100rpx;
    display: flex;
    justify-items: center;

    .r-header {
      margin-top: 30rpx;
      width: 100vw;
      height: 100rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;

      .type {
        padding: 0 15rpx;
        width: 400rpx;
        height: 66rpx;
        line-height: 66rpx;
        display: flex;
        justify-content: center;
        justify-items: center;
        border-radius: 10rpx;
        border: 1rpx solid #ccc;
        font-size: 32rpx;

        input {
          height: 66rpx;
        }

        .arrow {
          font-size: 51rpx;
        }
      }

      .time {
        padding: 0 10rpx;
        width: 240rpx;
        height: 66rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10rpx;
        border: 1rpx solid #ccc;
        font-size: 32rpx;

        .clock {
          height: 66rpx;
          line-height: 66rpx;
          font-size: 40rpx;
        }

        .text {
          height: 66rpx;
          line-height: 66rpx;
        }
      }
    }
  }

  .r-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .r-item {
      width: 660rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 20rpx;
      background-color: #fff;

      .sn {
        position: relative;
        padding-left: 30rpx;
        margin-bottom: 20rpx;
        font-size: 36rpx;
        font-weight: bold;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 2%;
          width: 8rpx;
          height: 30rpx;
          background: #db187c;
          border-radius: 5rpx;
          transform: translateY(-50%);
        }
      }

      .content {
        margin-bottom: 20rpx;
        border-bottom: 1rpx solid #e6e6e6;

        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          font-size: 30rpx;
          color: #666666;
        }
      }

      .button {
        height: 55rpx;
        display: flex;
        justify-content: flex-end;

        .b-item {
          width: 150rpx;
          height: 50rpx;
          margin-left: 15rpx;
          background: #ffffff;
          border-radius: 30rpx;
          font-size: 30rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #db187c;
          color: #db187c;
        }
      }
    }
  }
}

/deep/.van-sticky {
  height: 150rpx;
}
</style>